/*eslint-disable*/
import * as eCharts from 'echarts'
import { useRef, useEffect } from 'react';
type money={
    theme:string,
    note:string,
    money:number,
}
type value={
    [date:string]:money;
}
type TProp={
    money:value[]
}
const LineChart = (props:TProp )=>{
    const container:any= useRef(null)
    let dataList:string[]=[]
    let list:string[]=[]
    let putMoneySum:number[]=[]
    let inMoneySum:number[]=[]
    let putMoney:any=[]
    let inMoney:any=[]
    props.money.map((items)=>{
        //得到日期数组
        dataList.push(Object.keys(items)[0])    
    })
    for(let a=0;a<dataList.length;a++){
        //日期数组去重
        if(list.indexOf(dataList[a])===-1){
            list.push(dataList[a])
        }
    }
    list.map((option)=>{
        //根据日期筛选出 支出 和收入数组
        props.money.map((items)=>{
            if(Object.keys(items)[0]===option){
                if(items[option].theme==='支出'){
                    putMoney.push({[option]:items[option].money})
                }else{
                    inMoney.push({[option]:items[option].money})
                }
            }
        })        
    })
    list.map((option)=>{
        let a:any=[]
        let c=0
        putMoney.map((items:any)=>{
            if(Object.keys(items)[0]===option){
                a.push(items[option])
            }
        })
        for(let i=0;i<a.length;i++){
            c=c+a[i]
        }
        putMoneySum.push(c)
    })
    list.map((option)=>{
        let a:any=[]
        let c=0
        inMoney.map((items:any)=>{
            if(Object.keys(items)[0]===option){
                a.push(items[option])
            }
        })
        for(let i=0;i<a.length;i++){
            c=c+a[i]
        }
        inMoneySum.push(c)
    })
    
    
    useEffect(()=>{
        const myChart = eCharts.init(container.current);
        let option:any = {
            title: {
                top:'5%',
                text: '账单统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top:'2%',
                data: ['收入', '支出'],
                left:'200px',
            },
            grid: {
                top:'25%',
                bottom: '3%',
                containLabel: true
            },
           
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: list
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '支出',
                type: 'line',
                color:'red',
                data: putMoneySum
              },
              {
                name: '收入',
                type: 'line',
                color:'green',
                data: inMoneySum
              },  
            ]
          };
          myChart.setOption(option);
    },[])
    return(
        <div ref={container} style={{width: 400,height: 300,}}></div>
    )
}

export default LineChart